<template>
    <div class="main refund-list">
        <section>
            <el-form ref="searchForm" class="search-block" :model="listQuery" label-position="left" label-width="110px">
                <el-row :gutter="50">
                    <!--<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                        <el-form-item label="商品款号：" prop="goodsSn">
                            <el-input @keyup.enter.native="search" v-model="listQuery.goodsSn" placeholder="商品款号"
                                      maxlength="50" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                        <el-form-item label="商品名称：" prop="goodsName">
                            <el-input @keyup.enter.native="search" v-model="listQuery.goodsName" placeholder="商品名称" maxlength="60" clearable></el-input>
                        </el-form-item>
                    </el-col>-->
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                        <el-form-item label="订单号：" prop="orderSn">
                            <el-input @keyup.enter.native="search" v-model="listQuery.orderSn" placeholder="订单号" maxlength="50" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                        <el-form-item label="状态：" prop="status">
                            <el-select v-model="listQuery.status" placeholder="请选择" clearable>
                                <el-option label="未验证" :value="0"></el-option>
                                <el-option label="已验证" :value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="" class="btn-item">
                    <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
                    <span class="btn-reset" @click="resetForm('searchForm')">清空搜索条件</span>
                </el-form-item>
            </el-form>
            <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
                <el-table-column align="center" label="订单号" prop="orderSn" min-width="100"></el-table-column>
                <el-table-column align="center" label="收货人" prop="receiverName" min-width="100"></el-table-column>
                <el-table-column align="center" label="手机" prop="receiverMobile" min-width="100"></el-table-column>
                <el-table-column align="center" label="收货地址" prop="receiverAddress" min-width="100"></el-table-column>
                <el-table-column align="center" label="下单时间" prop="addTime" width="100">
                    <template slot-scope="scope">
                        <span v-text="formatDate(scope.row.addTime, 'yyyy-MM-dd hh:mm:ss')"></span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="付款时间" prop="payTime" width="100">
                    <template slot-scope="scope">
                        <span v-text="formatDate(scope.row.payTime, 'yyyy-MM-dd hh:mm:ss')"></span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="发货时间" prop="shippingTimeFh" width="100">
                    <template slot-scope="scope">
                        <span v-text="formatDate(scope.row.shippingTimeFh, 'yyyy-MM-dd hh:mm:ss')"></span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="商品名称" prop="goodsName" min-width="150"></el-table-column>
                <el-table-column align="center" label="款号" prop="goodsSn" min-width="100"></el-table-column>
                <el-table-column align="center" label="SKU" prop="sku" min-width="120"></el-table-column>
                <el-table-column align="center" label="商品数量" prop="goodsNumber" width="100"></el-table-column>
                <el-table-column align="center" label="颜色" prop="attrValue" min-width="100"></el-table-column>
                <el-table-column align="center" label="尺码" prop="attrValue2" min-width="100"></el-table-column>
                <el-table-column align="center" label="物流单号" prop="expressNo" min-width="100"></el-table-column>
                <el-table-column align="center" label="状态" prop="status" min-width="100">
                    <template slot-scope="scope">
                        {{scope.row.status?'已验证':'未验证'}}
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="listQuery.pageNum"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="listQuery.pageSize"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listTotal">
            </el-pagination>
        </section>
    </div>
</template>
<script>
  export default {
    name: 'orderList',
    props: {
      id: {
        default: ''
      }
    },
    data() {
      return {
        listLoading: false,
        listQuery: {
          id: this.id,
          orderSn: '',
          status: '',
          pageNumber: 1,
          pageSize: 10
        },
        list: [],
        listTotal: 0
      }
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
        this.listLoading = true;
        this.request({
          url: '/bsnl-merchant-order/billInfo/billInfoList',
          method: 'post',
          data: this.listQuery
        }).then(({data}) => {
          this.list = data.rows;
          this.listTotal = data.total;
          this.listLoading = false;
        }).catch(err => {
          console.log(err);
          this.list = [];
          this.listTotal = 0;
          this.listLoading = false;
        });
      },
      search() {
        this.listQuery.pageNum = 1;
        this.getList();
      },
      // 清空搜索条件
      resetForm(formName) {
        this.$nextTick(() => {
          this.$refs[formName].resetFields()
        })
      },
      handleSizeChange(value) {
        this.listQuery.pageSize = value;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.pageNum = val;
        this.getList();
      }
    }
  }
</script>
